<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../js/layui.js" type="text/javascript"></script>
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="../js/push_good/push_good.js" type="text/javascript"></script>
    <style type="text/css">
        .btn{
            width: 100px;
            margin: 0 20px;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(()=>{
            $("#goodSaler").val(JSON.parse(localStorage.getItem("admin")).userName);
        })
    </script>
</head>
<body>
    <article class="all" style="padding: 10px">
        <button type="button" id="goodinto" class="btn layui-btn layui-btn-normal">导入</button>
        <form class="layui-form" id="form">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="goodName" id="goodName" lay-verify="required" lay-reqtext="商品名称是必填项，岂能为空？" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="number" name="goodPrice" id="goodPrice" lay-verify="required" lay-reqtext="商品价格是必填项，岂能为空？" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商家</label>
                <div class="layui-input-block">
                    <input type="text" name="goodSaler" id="goodSaler" disabled lay-verify="required" lay-reqtext="商家是必填项，岂能为空？" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                    <select name="goodType" id="goodType" lay-filter="aihao">
                        <option value="" selected>请选择</option>
                        <option value="生活常用">生活常用</option>
                        <option value="学习资料">学习资料</option>
                        <option value="家用电器">家用电器</option>
                        <option value="电子设备">电子设备</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">商品介绍</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" id="goodState" name="goodState"></textarea>
                </div>
            </div>

            <div class="layui-upload">
                <label class="layui-form-label">商品图片</label>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list" style="padding-left: 110px;box-sizing: border-box;">
                    <img class="layui-upload-img" id="demo1" width="200px" height="100px" alt="图片"/>
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;padding-left: 110px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo" style="height: 5px">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
            <a name="list-progress"> </a>

            <div class="layui-form-item" style="margin-top: 30px">
                <div class="layui-input-block">
                    <button type="button" id="btn" class="layui-btn" >立即提交</button>
                </div>
            </div>
        </form>
    </article>
    <script>
        layui.use(['upload', 'element', 'layer'], function() {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: 'http://127.0.0.1:2021/shopstore/goodImgUpload' //改成您自己的上传接口
                ,headers: {
                    'token': JSON.parse(localStorage.getItem('token')),
                    'userId': JSON.parse(localStorage.getItem('admin')).userId
                }
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作
                    //……
                    $('#demoText').html(''); //置空上传失败的状态
                    //上传成功，存储图片路径
                    localStorage.setItem("imgPath",res.imgPath);
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
                //进度条
                ,progress: function(n, index, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });
    </script>
</body>
</html>